<script>
import {defineComponent} from 'vue'

export default defineComponent({
    name: "zhanyongbian",
    methods: {
        itemRightClick(event,stateDesc,isMainPage,name,type) {
            event.preventDefault(); // 阻止默认的右键菜单弹出
            // 显示自定义右键菜单
            const {clientX, clientY} = event
            let params = {
                clientX,
                clientY,
                type,
                stateDesc,
                isMainPage,
                deviceName:name,
            }

            this.$emit('itemRightClick', params)
        },
    },
    props: {
        translateX: { type: Number, default: 0 },
        translateY: { type: Number, default: 0 },
        rotate: { type: Number, default: 0 },
        scale: { type: Number, default: 1 },
        name: { type: String, default: '' },
        color: { type: String, default: '#fff' },
        jg_name:{
            type:String,
            default:''
        },
        brandInfo:{
            type: String,
            default: ""
        },
        data_id:{
            type: String,
            default: ''
        },
        stateDesc:{
            type: String,
            default: ""
        },
        isMainPage:{
            type: Boolean,
        },
        color_1:{
            type: String,
        },
        zybStyle:{
            type: [Number,String],
            default: 1
        },
        swidth:{
            type: [Number,String],
            default: 2
        }
    },
    computed: {
        computedTransform() {
            return `
                translate(${this.translateX}, ${this.translateY})
                rotate(${this.rotate},1460,600)
                scale(${this.scale})
            `;
        },
    },
})
</script>

<template>
    <svg>
        <g :transform="computedTransform" style="cursor: pointer">
    <g transform="rotate(90,1460,600)translate(-180, -380)">
        <circle cx="1460" cy="600" r="15" :style="{stroke:color,strokeWidth:swidth}"/>
        <line x1="1450" y1="600" x2="1460" y2="600" :style="{stroke:color,strokeWidth:swidth}"/>
        <line x1="1460" y1="600" x2="1468" y2="592" :style="{stroke:color,strokeWidth:swidth}"/>
        <line x1="1460" y1="600" x2="1468" y2="608" :style="{stroke:color,strokeWidth:swidth}"/>
        <g transform="rotate(-30,1455,592) translate(0,-20)" v-if="this.zybStyle===1">
            <line x1="1455" y1="592" x2="1455" y2="650" :style="{stroke:color,strokeWidth:swidth}"></line>
        <g transform="translate(-5,5)">
            <polygon points="1455,645,1460,650,1465,645" :fill="color" :stroke="color" stroke-width="2"></polygon>
        </g></g>
        <g v-else-if="this.zybStyle===0">
            <polyline points="1458,600,1458,580,1470,580" :style="{stroke:color,strokeWidth:swidth,fill:'none'}" fill="none"></polyline>
            <line x1="1470" y1="570" x2="1470" y2="590" :style="{stroke:color,strokeWidth:swidth}"></line>
            <line x1="1475" y1="575" x2="1475" y2="585" :style="{stroke:color,strokeWidth:swidth}"></line>
            <line x1="1480" y1="578" x2="1480" y2="582" :style="{stroke:color,strokeWidth:swidth}"></line>
        </g>
        <g v-else-if="this.zybStyle===3">
            <path
                transform="translate(5,0)"
                :d="`
    M ${1460 + 15} ${600}
    A 15 15 0 0 1 ${1460} ${600 + 15}
  `"
                :style="{ stroke: 'rgb(255,255,255)', strokeWidth: swidth*1.5, fill: 'none' }"
            />
            <line x1="1478" y1="600" x2="1488" y2="600" :style="{stroke:'rgb(255,255,255)',strokeWidth:swidth*1.5}"></line>
        </g>
        <g v-else>
        </g>


    </g>

    <g transform="translate(380, -205)">
        <circle cx="1460" cy="600" r="15" :style="{stroke:color_1,strokeWidth:swidth}" fill="none"/>
        <line x1="1455" y1="592" x2="1455" y2="608" :style="{stroke:color_1,strokeWidth:swidth}"/>
        <line x1="1455" y1="608" x2="1468" y2="600" :style="{stroke:color_1,strokeWidth:swidth}"/>
        <line x1="1455" y1="592" x2="1468" y2="600" :style="{stroke:color_1,strokeWidth:swidth}"/>

    </g>
        </g>
    </svg>
</template>

<style scoped lang="less">

</style>
